<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网登录</title>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon"/>
<link href="css/login.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
<style>

</style>
</head>

<body>
<header>
	<a href="index.html" target="_blank"><img src="images/logo.png" alt="logo" title="点击进入零食网" /></a>
</header>

<article>
	<div class="loginarea" id="app">
    	<div class="item">
        	<h1>源辰会员 <a href="register.html">立即注册</a></h1>
        </div>
        
        <div class="item item-border">
        	<label for="account" class="login_label"></label>
            <input type="text" class="ipt" name="account" v-model="account" @blur="checkInfo(0)"  @focus="clearmsg" id="account" placeholder="邮箱/用户名/已验证的手机"/>
            <span class="clear_btn"></span>
        </div>
        
        <div class="item item-border">
        	<label for="pwd" class="login_label pwd_label"></label>
            <input type="password" maxlength="18" class="ipt" name="pwd" v-model="pwd" @blur="checkInfo(1)"  @focus="clearmsg" id="pwd" placeholder="密码"/>
            <span class="clear_btn"></span>
        </div>
        
         <div class="item item-border">
        	<label for="code" class="login_label pwd_label"></label>
            <input type="text" maxlength="4" class="ipt1" name="code" v-model="code" @blur="checkInfo(2)" @focus="clearmsg" id="code" placeholder="验证码"/>
            <img class="code" src="code" onclick="this.src='code?d=' + new Date()">
        </div>
        
        <div class="item item2">
        	<input type="checkbox" id="auto">
        	<label for="auto">自动登录</label>
          	<a href="#">忘记密码</a>
        </div>
        
        <div class="item">
            <span style="color:red">{{info}}</span>
          	<a href="javascript:void(0)" @click="login" class="btn_img">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</a>
        </div>
        
        <div class="item item3">
          	<ul>
            	<li><a href="#"><span></span>QQ</a></li>
                <li><span></span></li>
                <li><a href="#"><span></span>微信</a></li>
            </ul>
        </div>
    </div>
</article>
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script type="text/javascript"  src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript">
  let vm=new Vue({
	  el:"#app",
	  data:{
		  account:"navy",
		  pwd:"123321",
		  code:"",
		  status:[false,false,false],//标识账户、密码和验证码是否通过
		  info:""    //提示信息
	  },
	  methods:{
		  checkInfo:function(flag){
			  var correct=false;
			  if(flag==0){//说明验证账户
				  let reg1 = /^1(3|4|5|6|7|8|9)\d{9}$/; // 验证手机号码格式
				  let reg2 = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; // 验证邮箱格式
				  let reg3 = /^[\u4e00-\u9fff\w]{2,16}$/; // 汉字
				  
              if( !(reg1.test(this.account) || reg2.test(this.account) || reg3.test(this.account) )){//说明校验不通过
            	  this.info="账号格式错误，请重新输入..."; 
                  correct=false;
              }else{
            	  correct=true;
              }
				  
			  }else if(flag==1){
				  let reg=/^[\w@!%]{6,15}$/;
				  if(reg.test(this.pwd)){
					  correct=true;
				  }else{
					  this.info="密码格式错误，请重新输入..."; 
	                  correct=false;
				  }
			  }else if(flag==2){
				  let reg=/^\w{4}$/;
				  if(reg.test(this.code)){
					  correct=true;
				  }else{
					  this.info="验证码格式错误，请重新输入..."; 
	                  correct=false;
				  }
			  }
			  //修改数组里面的值必须这样写，否则不会及时渲染
			  Vue.set(this.status,flag,correct);
		  },
		  clearmsg:function(){
			  this.info="";
		  },
		  login:function(){
			  if($.inArray(false,this.status)>=0) {
				  this.info="您输入的信息有误，请重新提交.."; 
	                  return;
			     }
			  axios.post("member/login",qs.stringify({nickName:this.account,pwd:this.pwd,realName:this.code})).then(rt =>{
				  if(rt.status==200){
					  if(rt.data.code==200){
						  //获取来源的地址，即是从哪个页面过来的
						  var temp=document.referrer;
						  console.info(temp);
						  if(temp=="" || temp.indexOf("register.html")>0){
							  location.href="index.html";
						  }else{
							  location.href=temp;
						  }
					  }else if(rt.data.code == 501){
						  this.info = "验证码错误...";
					  }else{
						  this.info="账号或者密码错误，请确认后重新提交.."; 
						  Vue.set(this.status,1,false);
					  }
				  }else{
					  this.info="请求失败，请检查你的网络...";
				   }
			    })
		  }
	  }
  })
</script>
</body>
</html>
